﻿<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <button id="btnChangeHeights" style="position:absolute;left:0;margin:10px;">Change heights</button>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { GeoImage } from '../../src/og/layer/GeoImage.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';

        document.getElementById("btnChangeHeights").onclick = function () {
        var h0 = sat.getHeight(),
        h1 = img.getHeight();
        img.setHeight(h0);
        sat.setHeight(h1);
        };

        var osm = new XYZ("OpenStreetMap", {
        isBaseLayer: true,
        url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        visibility: true,
        attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        var osmRed = new XYZ("OpenStreetMap", {
        diffuse: [1.2, 0.5, 0.5],
        specular: [0.7, 0.4, 0.4],
        shininess: 70,
        isBaseLayer: false,
        extent: [[130.10, 31.16], [130.9, 31.8]],
        url: "//b.tile.openstreetmap.org/{z}/{x}/{y}.png",
        visibility: true,
        height: 4000,
        opacity: 0.7,
        zIndex: 10
        });

        var sat = new XYZ("MapQuest Satellite", {
        shininess: 20,
        specular: [0.2, 0.2, 0.2],
        diffuse: [1.2, 1.2, 1.2],
        isBaseLayer: false,
        height: 4000,
        extent: [[130.355, 31.368], [130.656, 31.583]],
        url: "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
        visibility: true,
        zIndex: 15,
        attribution: `�2014 MapQuest - Portions �2014 "Map data �
        <a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
        <a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
        });


        var img = new GeoImage("Sakurajima volcano LANDSAT-8", {
        src: "landsat 8 sakurajima volcano lg.jpg",
        corners: [[130.45707789384713, 31.709325879170276], [130.7840602216474, 31.692775737529196], [130.7733037851439, 31.43233754673159], [130.46073202271168, 31.433614009357886]],
        visibility: true,
        specular: [0.0, 0.0, 0.0],
        diffuse: [1.5, 1.5, 1.5],
        ambient: [0, 0, 0],
        isBaseLayer: false,
        attribution: `
        <a href="//www.satimagingcorp.com/">www.satimagingcorp.com</a> SPOT-7`,
        opacity: 1.0,
        height: 10000,
        zIndex: 5
        });

        var globus = new Globe({
        "target": "globus",
        "name": "Earth",
        "terrain": new GlobusTerrain(),
        "layers": [osm, osmRed, sat, img]
        });

        globus.planet.flyExtent(img.getExtent());
    </script>
</body>

</html>